<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">

    <div class="top">
      <el-row class="row">
        <el-form>
          <el-col :span="8">
            <el-form-item>
              车辆类型: <el-select
                v-model="vehicleParams.truckTypeId"
                style="width:300px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in truckTypeNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item>
              车牌号码: <el-input
                v-model="vehicleParams.licensePlate"
                class="input"
                placeholder="请输入车牌号码"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <div
              class="dialog-footer"
            >
              <el-button
                type="danger"
                @click="vehicleSearch"
              >搜索</el-button>
              <el-button @click="vehicleReset">重置</el-button>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 状态切换 -->
    <div class="menu">
      <el-menu
        active-text-color="#ffd04b"
        mode="horizontal"
        style="flex"
        fixed-left
      >
        <el-menu-item
          index="1"
          @click="vehicleAll"
        >全部 {{ vehicleAllLength }}</el-menu-item>
        <el-menu-item
          index="2"
          @click="vehicleIsOK"
        >可用 0</el-menu-item>
        <el-menu-item
          index="3"
          @click="vehicleUsable"
        >停用 {{ vehicleAllLength }}</el-menu-item>
      </el-menu>
    </div>

    <!-- table -->
    <div class="table">

      <div class="table-btn">
        <el-button
          type="danger"
          @click="vehicleAdd"
        >新增车辆</el-button>
      </div>

      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >

          <el-table-column
            type="index"
            label="序号"
            width="80"
          >
          </el-table-column>

          <el-table-column
            prop="licensePlate"
            label="车牌号码"
          >
          </el-table-column>

          <el-table-column
            prop="truckTypeId"
            label="车辆类型"
          >
          </el-table-column>

          <el-table-column
            prop="driverNum"
            label="司机数量"
          >
          </el-table-column>

          <el-table-column
            prop="workStatus"
            label="车辆状态"
          >
            <template #default="{row}">
              {{ row.workStatus === 0 ? '停用' : '可用' }}
            </template>
          </el-table-column>

          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
          >
          </el-table-column>

          <el-table-column
            prop="allowableLoad"
            label="实载重量(T)"
          >
          </el-table-column>

          <el-table-column
            prop="allowableVolume"
            label="实载体积(方)"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            width="240"
          >
            <template #default="{row}">
              <!-- @click="$router.push(`/transit/vehicle-detail/${row.id}`)" -->
              <el-button
                type="text"
                @click="vehicleDetailId(row.id)"
              >查看详情</el-button>
              <el-button
                type="text"
                @click="vehicleBtnOpen(row)"
              >{{ row.workStatus === 1? '停用':'启用' }}</el-button>
              <el-button
                type="text"
                @click="vehicleCarDriver(row)"
              >配置司机</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          layout="total,prev, pager, next"
          :current-page="vehicleParams.page"
          :page-size="vehicleParams.pageSize"
          :total="total"
          @current-change="vehiclehandleCurrentChange"
        >
        </el-pagination>
      </div>

    </div>

    <!-- 新增弹框 -->
    <el-dialog
      title="新增车辆"
      :visible.sync="vehicleDialogFormVisible"
      @close="vehicleClose"
    >
      <el-form
        ref="vehicleAddForm"
        :model="vehicleAddForm"
        :rules="vehicleAddRules"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeName"
        >
          <el-select
            v-model="vehicleAddForm.truckTypeName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in truckTypeNameList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <el-input
            v-model="vehicleAddForm.licensePlate"
            placeholder="请输入车牌号码"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="GPS设备ID"
          prop="deviceGpsId"
        >
          <el-input
            v-model="vehicleAddForm.deviceGpsId"
            placeholder="请输入GPS设备ID"
          ></el-input>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="vehicleBtnOK"
        >确 定</el-button>
        <el-button @click="vehicleClose">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 点击启用 -->
    <el-dialog
      :title="vehicleTitle"
      :visible.sync="vehicleDialogVisibleOpen"
      width="30%"
    >
      <div class="meal"> <span>确定要启用吗? 车辆停用需满足以下条件：</span></div>
      <div class="box"> <span>1 车辆信息已完善</span>  <span>2 绑定司机>=2,且有排班</span></div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <template>
          <el-button
            size="mini"
            @click="vehicleDialogVisibleOpen = false"
          >取 消</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="vehicleArtiveBtnOK"
          >确 定</el-button>
        </template>
      </span>

    </el-dialog>

    <!-- 点击配置司机 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="vehicleShowDriver"
      width="30%"
    >
      <div class="meal"> <span>配置司机需要满足以下条件</span></div>
      <div class="box"> <span>1 车辆信息已完善</span>  <span>2 车辆无未完成运输任务</span></div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="vehicleShowDriver = false"
        >取 消</el-button>
        <el-button
          type="danger"
          size="mini"
          @click="vehicleShowpreview"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 点击配置司机确定 -->
    <el-dialog
      title="配置司机"
      :visible.sync="vehicleDriverIsOK"
      width="40%"
    >
      <el-row
        type="flex"
        justify="sapce-around"
        style="margin:10px 0"
      >
        <el-col :span="8">
          车牌号： <span>{{ vehicleDriver.licensePlate }}</span>
        </el-col>
        <el-col :span="16">
          车型： <span>{{ vehicleDriver.truckTypeName }}</span>
        </el-col>
      </el-row>

      <el-row
        type="flex"
        justify="sapce-between"
        style="margin:10px 0"
      >
        <el-col :span="8">
          车辆状态： <span>{{ vehicleDriver.workStatus === 1 ? "启用":"未启用" }}</span>
        </el-col>
        <el-col :span="16">
          实载重量： <span>{{ vehicleDriver.allowableVolume }}</span>
        </el-col>
      </el-row>

      <el-row style="margin:10px 0">
        <el-col :span="6">
          实载体积:<span>{{ vehicleDriver.allowableLoad }}</span>
        </el-col>
      </el-row>

      <el-row style="margin: 30px 0 30px">
        <el-col>
          <span class="peizhisiji">配置司机:</span>
          <el-select
            v-model="vehicleConfiguration"
            class="select"
            style="width:230px"
            placeholder="请输入司机名称"
            @change="vehicleBianhua"
          >
            <el-option
              v-for="(item) in []"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-table
            :data="vehicleDriverDetail"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="180px"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="司机名称"
              width="180px"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="180px"
            >
              <template>
                <el-button
                  type="text"
                  @click="this.$router.push('/src/views/transit/driver-detail.vue')"
                >
                  查看
                </el-button>
                <el-button
                  type="text"
                  @click="vehicleDel(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="vehicleDriverAddBtnOK"
        >确 定</el-button>
        <el-button
          @click="vehicleDriverIsOK = false"
        >取 消</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
// 车辆管理渲染,车辆类型下拉,车辆新增,点击停用,点击可用,
import { truckList, getCarTypeList, truckTypeAdd, getTruckListInDriver, truckStatusUse, getDriverListByCar, driverList } from '@/api/transit'
import { getUseCarSuccess } from '@/api/transport'
export default {
  name: 'Vehicle',
  data() {
    return {
      // 车辆类型下拉
      truckTypeNameList: [],
      vehicleAllLength: null,
      // table渲染
      tableData: [],
      vehicleParams: {
        page: 1,
        pageSize: 10,
        truckTypeId: '',
        licensePlate: '',
        workStatus: ''
      },
      total: 0,
      // 新增表单
      vehicleDialogFormVisible: false,
      vehicleAddForm: {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: null
      },
      vehicleAddRules: {
        truckTypeName: [{ required: true, message: '车辆类型不能为空', trigger: 'blur' }],
        licensePlate: [{ required: true, message: '车牌号码不能为空', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }]
      },
      // 点击启用或停用
      vehicleArtive: '',
      vehicleDialogVisibleOpen: false,
      vehicleTitle: '车辆启用',
      // 点击配置司机
      vehicleShowDriver: false,
      vehicleShowDriverId: null,
      vehicleDriver: {},
      vehiclePageDriver: [],
      // 点击配置司机确定
      vehicleDriverIsOK: false,
      vehicleDriverDetail: [],
      vehicleConfiguration: ''
    }
  },
  created() {
    this.getVehicleList()
    this.vehicleTruckTypeNameList()
  },
  methods: {
    // 渲染
    async getVehicleList() {
      const res = await truckList(this.vehicleParams)
      this.tableData = res.data.items
      this.total = +res.data.counts
      this.vehicleAllLength = res.data.counts
    },
    // 渲染车辆类型下拉
    async vehicleTruckTypeNameList() {
      const res = await getCarTypeList()
      this.truckTypeNameList = res.data
    },
    // 分页
    vehiclehandleCurrentChange(page) {
      this.vehicleParams.page = page
      this.getVehicleList()
    },
    // 点击新增
    vehicleAdd() {
      this.vehicleDialogFormVisible = true
    },
    // 点击取消
    vehicleClose() {
      this.vehicleDialogFormVisible = false
      this.$refs.vehicleAddForm.resetFields()
      this.vehicleAddForm = {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: ''
      }
    },
    // 点击确定
    vehicleBtnOK() {
      this.$refs.vehicleAddForm.validate(async(isOK) => {
        if (isOK) {
          await truckTypeAdd(this.vehicleAddForm)
          this.vehicleDialogFormVisible = false
          this.getVehicleList()
          this.$message.success('新增车辆成功')
        }
      })
    },
    // 点击搜索
    async vehicleSearch() {
      const res = await truckList({ ...this.vehicleParams })
      this.tableData = res.data.items
      this.vehicleParams.page = 1
    },
    // 点击重置
    vehicleReset() {
      this.vehicleParams = {
        page: 1,
        pageSize: 10,
        truckTypeId: '',
        licensePlate: ''
      }
      this.getVehicleList()
    },
    // 点击全部
    vehicleAll() {
      this.getVehicleList()
    },
    // 点击停用
    async vehicleUsable() {
      const res = await getTruckListInDriver({ ...this.vehicleParams })
      console.log(res)
      this.tableData = res.data
    },
    // 点击可用
    async vehicleIsOK() {
      const res = await getUseCarSuccess({ ...this.vehicleParams })
      console.log('可用', res)
      this.tableData = res.data
    },
    // 点击操作启用或者停用
    vehicleBtnOpen(row) {
      this.vehicleArtive = row
      this.vehicleDialogVisibleOpen = true
      if (row.status === 1) {
        this.title = '车辆停用'
      }
    },
    // 点击启用或停用确定
    async vehicleArtiveBtnOK() {
      if (this.vehicleArtive.status === 1) {
        const res = await truckStatusUse(this.vehicleArtive.id)
        this.$message(res.msg)
        this.vehicleDialogVisibleOpen = false
      }
    },
    // 点击配置司机
    async vehicleCarDriver(row) {
      this.vehicleShowDriver = true
      this.vehicleShowDriverId = row.id
      this.vehicleDriver = row

      const vehicleDriverDetail = await getDriverListByCar(row.truckTypeId)
      console.log(vehicleDriverDetail)
      const res = await driverList({ page: 1, pageSize: 10, truckTypeId: row.truckTypeId })
      console.log('司机数组', res)
      // const res = await getDriverListByCar({ page: 1, pageSize: 10, truckTypeId: row.truckTypeId })
      this.vehiclePageDriver = res.data.items
    },
    // 点击配置司机确定
    vehicleShowpreview() {
      this.vehicleShowDriver = false
      this.vehicleDriverIsOK = true
    },
    // change变化
    vehicleBianhua(vehicleBianhua) {
      const vehicleDriverDetailBianhua = this.vehiclePageDriver.filter((item, index) => index === vehicleBianhua)
      this.vehicleDriverDetail = vehicleDriverDetailBianhua
    },
    // 点击配置司机的确定的确定
    async vehicleDriverAddBtnOK() {
      this.$message.success('安排司机成功')
      this.vehicleDriverIsOK = false
    },
    // 点击配置司机的确定的删除
    vehicleDel() {
      this.$message.success('删除成功')
    },
    // 跳转详情
    // vehicleDetailId(id) {
    //   this.$router.push({
    //     path: `/transit/vehicle-detail?${id}`,
    //     query: {
    //       id: id,
    //       formUrIName: '车辆管理'
    //     }
    //   })
    // }
    vehicleDetailId(id) {
      this.$router.push(`/transit/vehicle-detail?id=${id}`)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.peizhisiji {
  margin-left: -270px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.box{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
.meal{
  display: flex;
  justify-content: start;
}
.menu {
  margin-left: 20px;
}
.pagination{
  margin: 20px 350px 0;
  padding: 20px 0 0;
}
.table-btn{
  margin-bottom: 20px;
}
.table {
  background-color: #fff;
  margin: 20px 20px 80px;
  padding: 20px;
}
.row {
  padding: 20px 20px;
}
.top {
  background-color: #fff;
  margin: 30px 20px 20px;
}
.select {
  width: 300px;
}
.input{
  width: 300px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
</style>
